<template>
	<view>
		<view class="item" style="min-height: 4rem;">
			<view class="t-title" style="width: 60px;">设备<i></i></view>
			<view class="t-content-nfc">
				<input class="i-content" type="text" disabled="true" placeholder="靠近设备标签识别" v-model="sn" />
				<view class="v-content" style="margin-left: 1rem;" v-show="buttonVisible" @click="_scanCode()">扫码
				</view>
				<view class="v-content" v-show="buttonVisible&&isSelect" @click="_selectSn()">选择</view>
				<view class="v-content" v-show="!isSelect" @click="_selectShow()">选择</view>
			</view>
		</view>

		<view class="item" v-show="locationVisible">
			<view class="t-title">设备位置<i></i></view>
			<view class="t-content">
				{{location}}
			</view>
		</view>
	</view>
</template>

<script>
	import generalApi from '@/api/general/generalApi.js'
	import qualityControlApi from '@/api/qualityControl/qualityControl.js'
	export default {
		data() {
			return {
				sn: "",
				deviceInfo: {},
				location: '',
			}
		},
		props: {
			rfid: { //上个页面传入rfid
				type: String,
				default: ""
			},
			locationVisible: { //是否显示设备位置
				type: Boolean,
				default: true
			},
			getnfcVisible: { //是否返回具体内容
				type: Boolean,
				default: true
			},
			getnfcCodeVisible: { //是否返回nfcCode
				type: Boolean,
				default: false
			},
			buttonVisible: { //是否显示搜索扫描按钮
				type: Boolean,
				default: true
			},
			isSelect: {
				type: Boolean,
				default: true
			},
		},
		methods: {
			_scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						this.sn = res.result;
						if (this.getnfcCodeVisible) {
							this.$emit('getnfcSn', res.result);
						}
						if (this.getnfcVisible) {
							this.deviceInfoByCondition(res.result,"");
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '二维码扫描失败，请重新扫描',
							icon: 'none',
							duration: 2000
						})
					},
					complete: (res) => {}
				})
			},
			_selectShow() {
				this.$emit('isShowSelect');
			},

			_selectSn() {
				var that = this
				uni.navigateTo({
					url: '/pages/general/select-device/select-device-jc',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							console.log(data)
							that.deviceInfo = data.data;
							that.location = data.data.location
							that.sn = data.data.rfid?data.data.rfid:'';
							if (that.getnfcVisible) {
								that.$emit('getnfc', data.data);
							}
							if (that.getnfcCodeVisible) {
								console.log(data);
								that.$emit('getnfcSn', data.data);
							}
						}
					},
					success: function(res) {

					}
				})
			},
			deviceInfoByCondition(rfid,deviceCode) {
				var _this = this;
				const params = {
					page: 0,
					limit: 0
				}
				generalApi.getDeviceListInfoByPager({
					"searchKey": rfid,
					"pager":params,
					"deviceCode":deviceCode,
				}, params, (result) => {
					console.log("接口getDeviceListInfoByPager成功");
					if(result.data.rows){
						_this.deviceInfo = result.data.rows[0];
						_this.$emit('getnfc', _this.deviceInfo);
						_this.sn = result.data.rows[0].rfid;
					}else{
						uni.showToast({
							title:"暂无此设备",
							icon: "none"
						})
					}
				});
			},
			clear(){
				this.sn = "";
				this.location = "";
			},
		},
		mounted() {
			var that = this;
			// 接收nfc的值
			uni.$on('nfcCode', (data) => {
				console.log(data);
				that.sn = data.code;
				if (that.getnfcCodeVisible) {
					that.$emit('getnfcSn', data.code);
				}
				if (that.getnfcVisible) {
					that.deviceInfoByCondition(data.code,"");
				}
			})
		},
		beforeDestroy() {
			console.log("移除监听")
			uni.$off('nfcCode') //移除监听nfc
		},
		onHide() {
			// uni.$off('nfcCode') //移除监听nfc
		}
	}
</script>

<style>
	@import url("@/pages/general/general.css");

	.t-content-nfc {
		width: 100%;
		margin-left: 16px;
		margin-right: 16px;
		display: flex;
		flex-flow: row;
		align-items: center;
	}

	.i-content {
		height: 65rpx;
		position: relative;
		box-shadow: 0px 0px 1px #888888;
		overflow: hidden;
		background: #fff;
		padding: 0px 0.8rem;
		flex: 1;
	}

	.v-content {
		height: 65rpx;
		background: #2069D4;
		line-height: 65rpx;
		color: #fff;
		margin: 3px;
		padding: 0 5px;
		border-radius: 5px;
	}

	.clear {
		width: 30rpx;
		height: 30rpx;
		border-radius: 4em;
		background: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 0.5rem;
	}
</style>
